import { RouterProvider } from 'react-router-dom'
import { App as AntApp, ConfigProvider, theme } from 'antd'
import zhCN from 'antd/locale/zh_CN'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
import router from './router'
import { AuthProvider } from './store/AuthProvider'
import { getConfig } from './config/env'
import LoadingOverlay from './components/LoadingOverlay'
import './App.css'

dayjs.locale('zh-cn')

const { appName } = getConfig()

function App() {
  return (
    <ConfigProvider
      locale={zhCN}
      theme={{
        algorithm: theme.defaultAlgorithm,
        token: {
          colorPrimary: '#409eff',
          colorBgLayout: '#f0f2f5',
          colorBgContainer: '#ffffff',
          colorLink: '#409eff',
          colorTextBase: '#303133',
          borderRadius: 6,
          fontFamily:
            '"Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", sans-serif',
        },
        components: {
          Layout: {
            headerBg: 'transparent',
            headerColor: '#ffffff',
            headerPadding: '0 24px',
            siderBg: '#001529',
            bodyBg: '#f0f2f5',
          },
          Menu: {
            itemBg: 'transparent',
            itemColor: '#d0d4da',
            itemSelectedColor: '#ffffff',
            itemSelectedBg: 'rgba(64, 158, 255, 0.35)',
          },
          Button: {
            primaryShadow: '0 2px 6px rgba(64, 158, 255, 0.4)',
          },
          Card: {
            borderRadiusLG: 10,
          },
        },
      }}
    >
      <AntApp message={{ top: 80 }}>
        <AuthProvider>
          <RouterProvider router={router} fallbackElement={<LoadingOverlay message="页面加载中..." />} />
        </AuthProvider>
      </AntApp>
    </ConfigProvider>
  )
}

document.title = appName

export default App
